<template>
    <a-spin tip="Loading..." :spinning="spinning">
        <div class="operation-box">
            <a-form :form="form" @submit="handleSubmit">
                <a-form-item label="小区" v-bind="col">
                    <a-select style="width: 25%" placeholder="请选择小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
                        <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="选择excel文件:" v-bind="col">
                    <a-upload
                            accept=".xls,.xlsx"
                            name="file"
                            :action="baseURL + 'community/upload_file?token=' + token()"
                            @change="handleChange"
                            :beforeUpload="beforeUp"
                            v-decorator="['fileList',{rules:[{required:true,message:'请上传excl'}]}]"

                    >
                        <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item label="模板文件下载:" v-bind="col">
                    <a href="/yucunkuan.xls" >下载导入模板</a>
                </a-form-item>
                <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:8}}">
                    <a-button type="primary" html-type="submit">保存</a-button>
                    <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
                </a-form-item>
            </a-form>
        </div>
    </a-spin>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
        name: 'charge_pre_deposit_in',
        data() {
            return {
                bd_info:[], // 小区列表
                spinning:false,
                form:this.$form.createForm(this),
                radioStyle: {
                    display: 'block',
                    height: '30px',
                    lineHeight: '30px',
                },
                fileList:[],
                bd_info_id:0,
                baseURL:this.axios.defaults.baseURL,
                col:{
                    labelCol:{xs:{span:24},sm:{span:8}},
                    wrapperCol:{xs:{span:24},sm:{span:10}}
                },
            }
        },
        mounted() {
            this.form.setFieldsValue({site:1});
            this.getBdList();
        },
        methods:{
            ...mapGetters(['token', 'pmsArId', 'nowMg']),
            getBdList(){
                this.axios({
                    method:'get',
                    url:'/community/get_bd_config_list',
                    params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
                }).then(res => {
                    let { code,msg,data } = res;
                    if(code === 0){
                        this.bd_info=data
                    }else this.$message.warning(msg);
                }).catch(err => {
                    this.$message.error('服务器发生错误...');
                })
            },
            // 获取小区设置信息
            getInfo(id) {
                return new Promise((resolve,reject) => {
                    this.axios({
                        method:'post',
                        url:'/community/get_building_info',
                        params:{id,token:this.token()}
                    }).then(res => {
                        let { code,msg,data } = res;
                        if(code === 0){
                            resolve(data);
                        }else this.$message.warning(msg);
                    }).catch(err => {
                        this.$message.error('服务器发生错误...');
                    })
                })
            },
            // 提交信息
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (err) {
                        for(let key in err){
                            for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
                        }
                    }
                    Object.assign(values,{token:this.token(),id:this.id});
                    this.spinning = true;
                    this.axios({
                        method:'post',
                        url:'/cashier/des_in',
                        data:values,
                    }).then(res => {
                        this.spinning = false;
                        if(res.code == 0){
                            this.$message.success('保存成功',1);
                            this.$router.push({name:'charge_pre_deposit_index'})
                        }else this.$message.warning(res.msg);
                    }).catch(() => {this.$message.error('服务器发生错误...',2);this.spinning = false;});
                });
            },
            handleChange(res){

            },
            beforeUp(file){
                console.log(this.fileList.length)
                if(fileList.length>1){
                    this.$message.error('已经上传一个文件了...',2)
                    return false;
                }
                return true;
            },
            // 图片大小验证
            checkImage(file) {
                if((file.size / 1024 / 1024) > 2) {
                    this.$message.warning('图片最大不可超过2M',2);
                    return false;
                }
            },
            // 上传图片
            imageUpload(info,text) {
                if (info.file.status === 'error') return this.$message.error(`${info.file.name}图片上传失败`);
                if (info.file.status === 'done') {
                    console.log(info)
                    const { file:{uid,response:{name,url}} } = info;
                    if(text === 'logo_file') return this.logo_fileList.push({uid,name,url});
                    if(text === 'bg_img') return this.bg_fileList.push({uid,name,url});
                }
                if (info.file.status === 'removed') {
                    if(text === 'logo_file') this.logo_fileList = [];
                    if(text === 'bg_img') this.bg_fileList = [];
                }
            },
            // 图片预览
            imgPreview(info) {
                this.previewImage = info.url || info.thumbUrl
                this.imagePreviewVisible = true
            },
            test(info){
                return info.fileList
                if(info.file.status === 'node') return info.file.uid;
            }
        }
    }
</script>

<style>

</style>
<style lang="less" scoped>
    .operation-box{
        background: #ffffff;
        padding:25px;
        box-sizing: border-box;
        .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
        }
        .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
        }
    }
</style>